/**
 * Created by Administrator on 2017/5/22 0022.
 */
//头部导航部分
$(function () {//入口函数
    //获取头部下面的第一个子元素的节点对象
    $('#warp-header').children().eq(0).children().eq(0).on('mouseenter', function () {//当鼠标移入时显示出来导航栏
        console.log($(this).parent().children().eq(2));
        $(this).parent().children().eq(2).show()
    })
    $('#warp-header').children().eq(0).on('mouseleave', function () {//当鼠标移除是隐藏掉
        $('#warp-header').children().eq(0).children().eq(2).hide()
    })


//    二级导航部分动态添加数据到内部
    var navsTop = $('#main>.nav-banner>.nav>.navs').eq(0).find('div').eq(0)//获取节点
    var navsTop1 = $('#main>.nav-banner>.nav>.navs').eq(1).find('div').eq(0)//获取节点
    var navsTop2 = $('#main>.nav-banner>.nav>.navs').eq(2).find('div').eq(0)//获取节点
    var navsTop3 = $('#main>.nav-banner>.nav>.navs').eq(3).find('div').eq(0)//获取节点
    var navsTop4 = $('#main>.nav-banner>.nav>.navs').eq(4).find('div').eq(0)//获取节点
    var navsTop5 = $('#main>.nav-banner>.nav>.navs').eq(5).find('div').eq(0)//获取节点
    var navsTop6 = $('#main>.nav-banner>.nav>.navs').eq(6).find('div').eq(0)//获取节点
    var navsTop7 = $('#main>.nav-banner>.nav>.navs').eq(7).find('div').eq(0)//获取节点
    var navsTop8 = $('#main>.nav-banner>.nav>.navs').eq(8).find('div').eq(0)//获取节点
    //请求后台数据

    $.ajax({
        url: 'json/navList.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop.append(odl)
            })
        }
    })

//导航数据二
    $.ajax({
        url: 'json/navList1.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop1.append(odl)
            })
            navsTop1.children('dl').eq(1).css('height', 99)
        }
    })


    //导航数据三
    $.ajax({
        url: 'json/navList2.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop2.append(odl)
            })
            navsTop2.children('dl').eq(1).css('height', 123)
        }
    })


    //导航数据四
    $.ajax({
        url: 'json/navList3.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop3.append(odl)
            })

            navsTop3.children('dl').eq(3).css('height', 75)
            navsTop3.children('dl').eq(7).css('height', 75)
        }
    })


    //导航数据五
    $.ajax({
        url: 'json/navList4.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop4.append(odl)
            })
        }
    })


    //导航数据六
    $.ajax({
        url: 'json/navList5.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop5.append(odl)
            })

        }
    })


    //导航数据七
    $.ajax({
        url: 'json/navList6.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop6.append(odl)
            })
            navsTop6.children('dl').eq(1).css('height', 75)
        }
    })


    //导航数据八
    $.ajax({
        url: 'json/navList7.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop7.append(odl)
            })
        }
    })


    //导航数据九
    $.ajax({
        url: 'json/navList8.json',
        type: 'post',
        async: true,
        success: function (result) {
            $(result).each(function (i, ret) {//遍历对象
                var odl = $('<dl></dl>')
                $(ret).each(function (j, n) {
                    for (var key in n) {//遍历对象
                        var odt = $('<dt></dt>')
                        odt.html('<a href="#">' + key + '</a>')
                        var str = n[key]
                        var arr = str.split(' ')
                        odl.append(odt)
                        for (var k = 0; k < arr.length; k++) {
                            var odd = $('<dd></dd>')
                            odd.html('<a href="#">' + arr[k] + '</a>')
                            odl.append(odd)
                        }
                    }
                })
                navsTop8.append(odl)
            })

        }
    })


    //事件触发隐藏二级导航
    //当鼠标移入时背景颜色的改变,及二级导航的出现
    $('#main .nav-banner .nav ul').each(function (i, oul) {
        $(oul).on('mouseenter', function () {
            $('#main .nav-banner .nav ul').css('background', '')
            $(this).css('background', '#f5f5f5')
            $(this).parent().children('.navs').hide()
            $(this).parent().children('.navs').eq(i).show()
        })
    })

    //错误写法
    // $('#main .nav-banner .nav ul').on('mouseenter',function () {
    //     // $('#main .nav-banner .nav ul').css('background','')
    //     // $(this).css('background','#f5f5f5')
    //
    // })

    //当鼠标移除时背景颜色的改变
    $('#main .nav-banner .nav').on('mouseleave', function () {
        $('#main .nav-banner .nav ul').css('background', '')
        $(this).children('.navs').hide()
    })


//    轮播图的使用

    function change() {
        ++count
        $('#main .nav-banner .banner li').eq(count).animate({'opacity': 1}, 300).siblings().animate({'opacity': 0}, 300)

        if (count == 3) {
            count = -1
        }
        $('#main .nav-banner .banner div a').eq(count).addClass('current').siblings().removeClass()

    }


    var timer
    var count = 0

    timer = setInterval(change, 3000)

    //左右轮播按钮
    $('#main .nav-banner .banner .left').on('click', function () {//左轮波按钮
        count--
        $('#main .nav-banner .banner li').eq(count).animate({'opacity': 100},0).siblings().animate({'opacity': 0}, 100)
        $('#main .nav-banner .banner div a').eq(count).addClass('current').siblings().removeClass()

        if (count <= 0) {
            count = 3
        }
    })
    $('#main .nav-banner .banner .right').on('click', function () {//右轮播按钮
        count++
        $('#main .nav-banner .banner li').eq(count).animate({'opacity': 100},0).siblings().animate({'opacity': 0}, 100)
        $('#main .nav-banner .banner div a').eq(count).addClass('current').siblings().removeClass()

        if (count >= 3) {
            count = -1
        }
    })

    //底部按钮轮播
    $('#main .nav-banner .banner div a').each(function (i, n) {
        $('#main .nav-banner .banner div a').eq(i).on('click',function () {
            count=i
            $('#main .nav-banner .banner div a').eq(count).addClass('current').siblings().removeClass()
            $('#main .nav-banner .banner li').eq(count).animate({'opacity': 1}, 300).siblings().animate({'opacity': 0}, 300)
            if (count >= 3) {
                count = -1
            }
        })
    })


    //当鼠标移动到轮播内关闭定时器
    $('#main .nav-banner .banner').on('mouseover',function () {
        clearInterval(timer)
    })
    //当鼠标移出轮播位置时开启定时器
    $('#main .nav-banner .banner').on('mouseleave',function () {
        timer = setInterval(change, 3000)
    })

})